
<template>
  <div class="knowledge container" id="knowledge">
    <yes-tabs
      :tab-list="tabList"
      @tab-click="handleClick"
    />
    <section class="knowledgeBox">
      <div class="classify">
        <el-select v-model='fiy.val' v-for='(fiy,y) in classifyOptions' @change="changeOpt">
          <el-option :value='fiyopt.cateId' v-for='(fiyopt,f) in fiy.opt'  :label='fiyopt.itemName' />
        </el-select>

      </div>

      <el-tabs
        v-model="groupTabName"
        class="container"
        @tab-click="handleGroup"
      >
        <el-tab-pane v-for="item in TagsGroup" :key="item.groupId" :label="item.groupName" :name="item.groupId" />
      </el-tabs>
      <el-row class="cardCon">
     <el-col :md='12' :lg='8'  class="cardList flex-box  pad" v-for="(oList ,o ) in ColumnAllList" :key="o">

       <el-card class="box-card " >
         <div slot="header" class="clearfix">
           <span>{{oList.tagsName}}</span>
           <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
         </div>
         <div class="flex-box between text item" v-if='oList.sub.length' v-for="(sList,s) in  oList.sub" :key="s">
           <span class="knowName t-left">{{sList.tagsName}}</span>
           <el-button type="text" class="green" v-if='!sList.edit' @click='editColumnListSub'>修改</el-button>
           <el-button type="text" class="red"  @click='delColumnListSub' >删除</el-button>
         </div>
         <div class="clearfix el-card__footer padTop " style="border-top:1px solid #EBEEF5;">
           <el-button @click='addSelfLabel(o)'>添加自定义标签</el-button>
           <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
         </div>
       </el-card>
       <el-button type="primary" class="arrowBtn" icon='el-icon-right' style="margin-left: 16px;padding:4px;"></el-button>
      </el-col>
      </el-row>
      </section>
  </div>
</template>

<script>
import YesTabs from '@/components/YesTabs'


import {findByFuzzyTagsName,findColumnList} from '@/api/basic'
import {cateTagsFindList,addCategoryTags,addColumnListSub} from '@/api/tags'


export default {
    name:"createResult",
  components: {
    YesTabs
  },
  data() {
    return {
      info:{

        lessonId:0,
      },
      state:'',
      activeTabName:'TEACHINGRESEARCH',
      groupTabName:'',
      ColumnList:{},//栏目列表
      tabList: [
        {
          label: '知识体系',
          name: 'konwledge'
        },
        {
          label: '教研/教研报告',
          name: 'TEACHINGRESEARCH'
        },
        {
          label: '教学设计',
          name: 'TEACHING_DESIGN',
        },
        {
          label: '文章',
          name: 'artical'
        },
        {
          label: '资源',
          name: 'MATERIAL'
        }
      ],

      // classifyOptions:{
      //  '学段':['all','一年级','二年级','三年级','四年级','五年级','六年级'],
      //  '学科':['all','语文','数学','英语','化学'],
      //  // '教材':['人教版','苏教版','沿海版'],
      //  '类型1':['all','教室','课件','反思','课堂实录'],
      //  '类型2':['教师成长','学科教学'],
      // },
      lesson_list: [
        {
          title:'第二课秋天 作者田良玉',
        },
        {
          title:'第二课秋天 作者田良玉',
        },
        {
          title:'第二课秋天 作者田良玉',
        },
        {
          title:'第二课秋天 作者田良玉',
        },
        {
          title:'第二课秋天 作者田良玉',
        },
        {
          title:'第二课秋天 作者田良玉',
        },
        {
          title:'第二课秋天 作者田良玉',
        },
        {
          title:'第二课秋天 作者田良玉',
        },
        {
          title:'第二课秋天 作者田良玉',
        },
      ],
      TagsGroup:{},
      ColumnAllList:[],
      classify:{

      },
      classifyOptions:{

      },
    }
  },
  created() {
    this.initData()
  },
  watch:{

  },
  methods: {
    async initData(){
    this.getGroup()
    //标签栏目列表查询
    //this.findColumnList()
    //分类标签列表查询

    },
    addSelfLabel(ind){

      let that = this
      this.$prompt('请输入标签名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /\S/,
                inputErrorMessage: '标签不能为空'
              }).then(({ value }) => {
                
                that.addCategoryTags(that.ColumnList[ind].tagsId,value,ind)
              }).catch(() => {
                // this.$message({
                //   type: 'info',
                //   message: '取消输入'
                // });
              });
    },
    async addCategoryTags(pTagsId,tagsName,ind){
          let addTagsVo = {
                groupId:this.groupTabName,
                "growthClassify": "",
                pTagsId,
                "stageId": "",
                "subjectId": "",
                "tagsBizEnum":this.activeTabName,
                tagsName
        }
        let res =await addCategoryTags(addTagsVo)
        if(res.code==='1'){
          if(this.ColumnList[ind].sub&&res.data){
                  if(this.ColumnList[ind].sub.length>=0){
                     this.ColumnList[ind].sub.push(res.data)
                  }else{
                    this.ColumnList[ind].sub =[res.data]
                  }
          }

          }
      },
    async addColumnListSub(pTagsId){
      let params = {
      "growthClassify": "",
      "pTagsId": 0,
      "stageId":'',
      "subjectId": "",
      "tagsName": ""
    }
    let res = await addColumnTags()
    },
    handleGroup(tab){
    this.getCateTagsFindList(tab.name)
    },
    async getCateTagsFindList(groupId){
     let params ={
        groupId,
        "growthClassify": "",
        "stageId": "",//学段,非必填
        "subjectId": "", //学科,非必填
        "tagsBizEnum": this.activeTabName}
     let res = await cateTagsFindList(params)

      res.data.map((list)=>{
        if(that.isArr(list.sub)){
          this.ColumnList.push(that)
        }
      })
      this.ColumnList = res.data
    },
    async findColumnList(){
      let params ={
          "growthClassify": "",
          "stageList": [
            ""
          ],
          "subjectList": [
            ""
          ]
        }

     if(res.data.sub){
       this.ColumnAllList = res.data
     }


    },
    async getGroup(){
     let res  = await this.$store.dispatch('app/findTagsGroup',{kindEnum:this.activeTabName})

      console.log("findTagsGroup",res)
      this.groupTabName = res[0].groupId
      this.getCateTagsFindList( res[0].groupId)
      this.TagsGroup  = res
    },
    async findByParentpCateId(params,init){

      let data  = await this.$store.dispatch('app/findByParentpCateId',params)
      if(data.categoryVoList){
        let  category = data.categoryVoList[0]
        params.pCateId = category.cateId
          this.$set(this.classifyOptions,data.groupName,{val:params.pCateId,opt:data.categoryVoList})
         if(!data.categoryVoList[0].node){

           this.findByParentpCateId(params)
         }
      }
       console.log("this.classifyOptions",this.classifyOptions)
    },
    changeOpt(val){
      let params = {bizTypeEnum :this.activeTabName,pCateId:val}
       //this.classifyOption={}
       //this.$set(this,'classifyOptions',{})
      this.findByParentpCateId(params,true)
    },
    handleClick(tab, e) {
      console.log(tab.name, e)
      if(this.activeTabName !==tab.name){
        this.activeTabName = tab.name

        if(['TEACHINGRESEARCH','TEACHING_DESIGN'].indexOf(tab.name) >-1){
          this.getGroup()
          let params = {bizTypeEnum :tab.name,pCateId:0}
          this.findByParentpCateId(params,true)
        }else{
          this.TagsGroup = []
        }
      }

    if(['TEACHINGRESEARCH','TEACHING_DESIGN'].indexOf(tab.name) >-1){
      this.getGroup()
      let params = {bizTypeEnum :tab.name,pCateId:0}
      this.findByParentpCateId(params,true)
    }else{
      this.TagsGroup = []
    }

    },
    handleSelect(){

    },
    deleCardStick(){

    }
  }
}
</script>
<style lang="scss" scoped>
  $bg:#2EB06F;
  $gray:#E6F5ED;
  $textColr-2:rgba(0,0,0,.45);
.knowledge{
  .classify{
    padding:15px 0;
    .el-select {
      margin:5px 10px;
    }

  }
  .cardList{
    .box-card{
      width: calc(100% - 24px);
      min-width:240px;
    }

  }
  .knowName{
    width:250px;
  }


}
</style>
